<template>
  <div>
    <div class="right">
      <el-button type="primary" @click="handleAdd()">新增培训申请</el-button>
    </div>
    <el-container style="background-color: #fff">
      <div class="box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="待审批" name="first">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
              :header-cell-style="{
                'font-weight': '600',
                color: '#666',
                'font-size': '14px',
                'text-align': 'center',
              }"
            >
              >
              <el-table-column
                label="申请编号"
                style="font-weight: 600"
                sortable
                align="center"
                width="150"
              >
                <template slot-scope="scope"
                  ><span @click="dialogVisible = true">{{
                    scope.row.sqbh
                  }}</span></template
                >
              </el-table-column>
              <el-table-column
                prop="name"
                align="center"
                label="申请人"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="sqpxlb"
                label="申请培训类别"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="所属单位"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="zhiwu"
                label="申请人职务"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                align="center"
                label="申请人联系方式"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    icon="el-icon-edit"
                    >通过</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    icon="el-icon-close"
                    >驳回</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="dibu">
              <el-pagination
                :page-size="100"
                layout="total, prev, pager, next"
                :total="1000"
                style="margin-top: 20px"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已审批" name="second">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
              :header-cell-style="{
                'font-weight': '600',
                color: '#666',
                'font-size': '14px',
                'text-align': 'center',
              }"
            >
              >
              <el-table-column
                label="申请编号"
                style="font-weight: 600"
                sortable
                align="center"
                width="150"
              >
                <template slot-scope="scope"
                  ><span @click="dialogVisible = true">{{
                    scope.row.sqbh
                  }}</span></template
                >
              </el-table-column>
              <el-table-column
                prop="name"
                align="center"
                label="申请人"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="sqpxlb"
                label="申请培训类别"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="所属单位"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="zhiwu"
                label="申请人职务"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                align="center"
                label="申请人联系方式"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <router-link to="/generator/answer/answerSee">
                    <el-button size="mini" type="primary" icon="el-icon-edit"
                      >创建培训</el-button
                    >
                  </router-link>
                </template>
              </el-table-column>
            </el-table>
            <div class="dibu">
              <el-pagination
                :page-size="100"
                layout="total, prev, pager, next"
                :total="1000"
                style="margin-top: 20px"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已驳回" name="third">
            <el-table
              ref="multipleTable"
              :data="tablebohui"
              tooltip-effect="dark"
              style="width: 100%"
              :default-sort="{ prop: 'date', order: 'descending' }"
              :header-cell-style="{
                'font-weight': '600',
                color: '#666',
                'font-size': '14px',
                'text-align': 'center',
              }"
            >
              >
              <el-table-column
                label="申请编号"
                style="font-weight: 600"
                sortable
                align="center"
                width="150"
              >
                <template slot-scope="scope"
                  ><span @click="dialogVisible = true">{{
                    scope.row.sqbh
                  }}</span></template
                >
              </el-table-column>
              <el-table-column
                prop="name"
                align="center"
                label="申请人"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="sqpxlb"
                label="申请培训类别"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="所属单位"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="zhiwu"
                label="申请人职务"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                align="center"
                label="申请人联系方式"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="bohui"
                align="center"
                label="驳回原因"
                show-overflow-tooltip
              >
              </el-table-column>
            </el-table>
            <div class="dibu">
              <el-pagination
                :page-size="100"
                layout="total, prev, pager, next"
                :total="1000"
                style="margin-top: 20px"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-dialog :visible.sync="dialogVisible" width="30%">
        <span>
          申请人：周洋
          <br />
          申请人所属单位：合肥学院
          <br />
          申请培训类型：XXXXXX
          <br />

          申请人职务：教授
          <br />

          联系电话：135444444509
          <br />

          申请内容：XXXXXXXXXXXXXXXXXXXXXXXXXX
          <br />

          XXXXXXXXXXXXXXXXXXXXXXX
          <br />

          XXXXXXXXXXXXXXXXXXXXXXXXXXX
          <br />

          XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
          <br />

          XXXXXXXXXXXXXXXXXXXXXX</span
        >
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog :title="title" :visible.sync="dialogBianji" width="30%">
        <div class="tishi">
          <i class="el-icon-question" />审核{{ tgbh }}操作确认
        </div>
        <div class="aa">确定要{{ tgbh }}当前培训申请吗？</div>
        <el-form ref="form" :model="form" label-width="130px">
          <!-- <el-form-item > -->
          <div class="aa">
            审核{{ tgbh }}原因<sup style="color: red">*</sup>
          </div>
          <el-input type="textarea" v-model="form.desc"></el-input>
          <!-- </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-dialog :title="title" :visible.sync="dialogAdd" width="30%">
        <el-form ref="form" :model="form" label-width="130px">
          <el-form-item label="申请人">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="申请人所属单位">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="申请人联系电话">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="申请培训类别">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请原因：">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <el-main> </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: ["showFileName"],
  data() {
    return {
      activeName: "first",
      stripe: "true",
      dialogVisible: false,
      dialogAdd: false,
      dialogBianji: false,
      tgbh: "",
      tableData: [
        {
          sqbh: "0001",
          name: "张小刚",
          sqpxlb: "电子课程培训",
          address: "合肥学院北基地",
          zhiwu: "教授",
          phone: 13789890090,
        },
        {
          sqbh: "0001",
          name: "张小刚",
          sqpxlb: "电子课程培训",
          address: "合肥学院北基地",
          zhiwu: "教授",
          phone: 13789890090,
        },
        {
          sqbh: "0001",
          name: "张小刚",
          sqpxlb: "电子课程培训",
          address: "合肥学院北基地",
          zhiwu: "教授",
          phone: 13789890090,
        },
        {
          sqbh: "0001",
          name: "张小刚",
          sqpxlb: "电子课程培训",
          address: "合肥学院北基地",
          zhiwu: "教授",
          phone: 13789890090,
        },
      ],
      tablebohui: [
        {
          sqbh: "0001",
          name: "张小刚",
          sqpxlb: "电子课程培训",
          address: "合肥学院北基地",
          zhiwu: "教授",
          phone: 13789890090,
          bohui: <el-link style="color:blue;">没有预算 </el-link>,
        },
        {
          sqbh: "0001",
          name: "张小刚",
          sqpxlb: "电子课程培训",
          address: "合肥学院北基地",
          zhiwu: "教授",
          phone: 13789890090,
          bohui: <el-link style="color:blue;">没有预算 </el-link>,
        },
        {
          sqbh: "0001",
          name: "张小刚",
          sqpxlb: "电子课程培训",
          address: "合肥学院北基地",
          zhiwu: "教授",
          phone: 13789890090,
          bohui: <el-link style="color:blue;">没有预算 </el-link>,
        },
        {
          sqbh: "0001",
          name: "张小刚",
          sqpxlb: "电子课程培训",
          address: "合肥学院北基地",
          bohui: <el-link style="color:blue;">没有预算 </el-link>,
          zhiwu: "教授",
          phone: 13789890090,
        },
      ],
      multipleSelection: [],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      title: "",
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleEdit() {
      this.dialogBianji = true;
      this.title = "审核通过操作确认";
      this.tgbh = "通过";
    },
    handleAdd() {
      this.dialogAdd = true;
      this.title = "新增培训申请";
    },
    handleDelete() {
      this.dialogBianji = true;
      this.title = "审核驳回操作确认";
      this.tgbh = "驳回";
    },
    // handlechuangjian() {
    //   this.$router.push("/see");
    // },
    onSubmit() {
      console.log("submit!");
    },
    handleClose(done) {
      console.log("1112");
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped >
.box {
  width: 100%;
  margin: 10px 0 50px 50px;
  border: 1px solid #e9e9e9;
}
.right {
  width: 80%;
  margin: 10px auto;
  display: flex;
  justify-content: right;
}
/deep/.el-tabs__item {
  color: #666;
  font-size: 15px;
  font-weight: 600;
  width: 120px;
  height: 55px;
  text-align: center;
  line-height: 55px;
}
/deep/.cell {
  text-align: center !important;
}
.dingbu {
  width: 50%;
  margin-left: 50px;
  display: flex;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  justify-content: space-between;
}
.but {
  width: 50%;
  padding: 0px 0 50px 50px;
  box-sizing: border-box;
  text-align: center;
}
.dibu {
  display: flex;
  justify-content: right;
  align-items: center;
}
.tishi {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑", sans-serif;
  font-weight: 700;
  color: #666666;
  font-size: 16px;
}
.tishi > i {
  color: #ff9900;
}
.aa {
  font-family: "微软雅黑 Regular", "微软雅黑", sans-serif;
  font-weight: 400;
  color: #999999;
  font-size: 14px;
  margin: 10px 0;
}
</style> 